<script setup lang="ts">
import { ref } from 'vue';
import { reqGetRolePermission, reqAssignRolePermission } from '@/api/acl/role';
import type { PermissionList } from '@/api/acl/permission-type';
import { useQuasar } from 'quasar';

const { notify } = useQuasar();

const drawerVisible = ref<boolean>(false);
const roleId = ref<number>();
function showDrawer(id: number) {
  roleId.value = id;
  getPermissionList();
  drawerVisible.value = true;
}
defineExpose({ showDrawer });

// 权限列表
const permissionList = ref<PermissionList[]>([]);
// 加载状态
const loading = ref<boolean>(false);
async function getPermissionList() {
  loading.value = true;
  try {
    const result = await reqGetRolePermission(roleId.value!);
    if (result.code === 200) {
      permissionList.value = result.data;
      ticked.value = [];
      expanded.value = [];
      handlePermissionList(permissionList.value);
    } else {
      throw new Error('获取权限列表失败');
    }
  } catch (error: any) {
    notify({
      type: 'negative',
      message: error.message,
      position: 'top'
    });
  }
}

// 处理列表数据
function handlePermissionList(list: PermissionList[]) {
  list.forEach(item => {
    if (item.select && item.level === 4) {
      ticked.value.push(item.id!);
    } else if (item.select && item.children && item.children.length > 0) {
      expanded.value.push(item.id!);
      handlePermissionList(item.children);
    }
  });
  loading.value = false;
}

// 勾选的权限
const ticked = ref<number[]>([]);
// 展开的节点
const expanded = ref<number[]>([]);

// 提交权限
async function onSubmit() {
  try {
    // 选中和半选中的所有id都要
    const result = await reqAssignRolePermission(
      roleId.value!,
      ticked.value.concat(expanded.value)
    );
    if (result.code === 200) {
      notify({
        type: 'positive',
        message: '分配角色权限成功',
        position: 'top'
      });
      drawerVisible.value = false;
    } else {
      throw new Error('分配角色权限失败');
    }
  } catch (error: any) {
    notify({
      type: 'negative',
      message: error.message,
      position: 'top'
    });
  }
}
</script>

<template>
  <q-drawer
    v-model="drawerVisible"
    side="right"
    overlay
    no-swipe-open
    no-swipe-close
  >
    <q-scroll-area class="fit">
      <q-list>
        <q-item>
          <q-item-label header class="text-h6">分配菜单和按钮权限</q-item-label>
        </q-item>
        <q-item>
          <q-tree
            :nodes="permissionList"
            node-key="id"
            label-key="name"
            tick-strategy="leaf"
            v-model:ticked="ticked"
            v-model:expanded="expanded"
            v-show="!loading"
          />
          <q-inner-loading
            :showing="loading"
            label="Please wait..."
            label-class="text-teal"
            label-style="font-size: 1.1em"
          />
        </q-item>
        <q-item v-if="!loading">
          <q-item-section>
            <div class="flex justify-end q-gutter-md">
              <q-btn
                color="primary"
                flat
                label="取消"
                @click="drawerVisible = false"
              ></q-btn>
              <q-btn color="primary" label="提交" @click="onSubmit"></q-btn>
            </div>
          </q-item-section>
        </q-item>
      </q-list>
    </q-scroll-area>
  </q-drawer>
</template>

<style scoped>
/* code... */
</style>
